<template>
	<view class="Tab">
		<!-- 滚动区域 -->
		<scroll-view scroll-with-animation :scroll-into-view="`item${activeIndex}`" :scroll-left='scrollLeft'
		 scroll-x="true" class="tab-scroll">
			<view class="tab-content">
			<view :key="index" @click="tabActive(index)" :class="{'item-active':activeIndex === index}"
			 class="tab-scroll-item" v-for="(item,index) in list" :id="`item${index}`" >
				{{item.name}}
			</view>
			</view>
		</scroll-view>
		<!-- 图标区域 -->
		<view class="tab-icon">
			<uni-icons @click="setting" type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			list:{
				type:Array
			},
			activeIndex: Number // 字体选中状态
		},
		data() {
			return {
				scrollLeft: 0
			}
		},
		methods: {
			tabActive(i) {
				this.$emit('active', i)
			},
			async setting() {
				await this.checkedisLogin()
				uni.navigateTo({
					url:'/pages/labelAdmin/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './css/index.scss'
</style>